<template>
  <div class="main">
    <div class="left">
      <div class="top">
        <img src="../../../assets/back.png" alt="" @click="back" />
        <h4>{{ props.title }}告警</h4>
      </div>
      <div class="main_m content">
        <ul>
          <li class="li_top">
            <h4 class="divL">{{ props.newObj.title }}</h4>
            <div
              class="divR"
              :class="props.newObj.tag == '重要' ? 'active' : ''"
            >
              {{ props.newObj.tag }}
            </div>
          </li>
          <li>
            <div>
              <span>告警编号：</span>
              <span>{{ props.newObj.idCode }}</span>
            </div>
            <div>
              <span>告警类型：</span>
              <span>{{ props.newObj.type }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>告警名称：</span>
              <span>{{ props.newObj.alarmName }}</span>
            </div>
            <div>
              <span>告警级别：</span>
              <span>{{ props.newObj.rank }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>告警位置：</span>
              <span>{{ props.newObj.position }}</span>
            </div>
            <div>
              <span>设备ID：</span>
              <span>{{ props.newObj.deviceId }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>设备名称：</span>
              <span>{{ props.newObj.deviceName }}</span>
            </div>
            <div>
              <span>设备IP：</span>
              <span>{{ props.newObj.deviceIP }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>上报时间：</span>
              <span>{{ props.newObj.time }}</span>
            </div>
            <div>
              <span>上报人：</span>
              <span>{{ props.newObj.informant }}</span>
            </div>
          </li>
        </ul>
        <div class="img" v-if="props.newObj.trajectory">轨迹</div>
        <!-- 诊断规则 -->
        <div v-if="props.newObj.diagnosis" class="diagnosis">
          <p class="diagnosis_t">诊断规则</p>
          <p class="diagnosis_c">{{ props.newObj.diagnosis.rule }}</p>
          <div class="log">
            <p class="log_t">诊断日志</p>
            <div
              v-for="(i, k) in props.newObj.diagnosis.logs"
              :key="k"
              class="log_c"
            >
              <div class="circle"></div>
              <p>{{ i.time }}</p>
              <p>{{ i.content }}</p>
            </div>
          </div>
        </div>
        <ul class="ul_deel">
          <li>
            <h4 class="title">告警处理</h4>
          </li>
          <li>处理人员：{{ props.newObj.handling.alarmName }}</li>
          <li>告警时间：{{ props.newObj.handling.time }}</li>
          <li>告警备注：{{ props.newObj.handling.remark }}</li>
          <li>告警意见：{{ props.newObj.handling.option }}</li>
        </ul>
        <div class="bottom" v-if="props.newObj.pople">
          <h4>执行人员</h4>
          <div class="one">
            <div class="bottom_l">
              执行人员：{{ props.newObj.pople.alarmName }}
            </div>
            <div class="bottom_r">
              执行情况：<span class="condition">{{
                props.newObj.pople.condition
              }}</span>
            </div>
            <div class="bottom_l">指派时间：{{ props.newObj.pople.time }}</div>
          </div>
        </div>
        <div class="pre_plan" v-if="props.newObj.pre_plan">
          <h4>预案处理</h4>
          <div class="plan">
            <div
              v-for="(i, k) in props.newObj.pre_plan"
              :key="k"
              @click="enterUe(k)"
              :class="i.show ? '' : 'gray'"
            >
              {{ i.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="center">2</div> -->
    <div class="right">
      <div class="oneR">
        <h4>实时监控</h4>
        <img class="imges" src="@/assets/through/1.jpg" alt="" />
      </div>
      <!-- <div class="oneR" v-if="true">
        <div ></div>
      </div> -->
      <div class="oneR">
        <h4>抓拍照片</h4>
        <img class="imges" src="@/assets/through/2.jpg" alt="" />
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  defineProps,
  watchEffect,
  computed,
  watch,
  reactive,
} from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const emit = defineEmits(["goBack"]);
let path = ref("");

const props = defineProps({
  newObj: {
    type: Object,
  },
  title: {
    type: String,
  },
});
const back = () => {
  emit("goBack", true);
};
let obj = ref(props.newObj);
const newObj = {};
const pageFunctionName = (idx) => ue5("function_name2", function_params(idx));
function function_params(idx) {
  return idx;
}

function enterUe(idx) {
  pageFunctionName(idx);
}
watchEffect(() => {
  newObj.value = props.newObj;
});
onMounted(() => {
  path.value = route.path;
  // console.log(route.path);
});
</script>
<style scoped>
.main {
  width: 100%;
  color: #fff;
}
.left {
  width: 4rem;
  height: 95vh;
  float: left;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.top {
  padding: 0.2rem 0.3rem;
  display: flex;
}
.top img {
  width: 30px;
  height: 20px;
  padding: 0 1vw 0 0;
}
.main_m {
  padding: 1.5vh 0 0 1vw;
}
.content {
  font-size: 18px;
  padding: 0 1vw;
}
.content ul:first-child {
  padding: 0 0 1vh 0;
}
.content ul > li {
  padding: 0.05rem 0;
  font-size: 16px;
  display: flex;
  justify-content: start;
  align-items: center;
}
ul > li h4 {
  padding: 0.08rem 0;
}
ul > li div {
  font-size: 16px;
  width: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
h4 {
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content ul > li div:last-child span:first-child {
  padding: 0 0 0 1vw;
}
.content ul > li .divR {
  margin-left: 7vw;
  width: 3vw;
  height: 1.8vh;
  line-height: 1.8vh;
  padding: 2px;
  background-color: #bd9560;
  text-align: center;
}
.active {
  background-color: #a35958;
}

.bottom {
  padding: 0.1rem 0;
}
.bottom h4 {
  padding: 0.1rem 0;
}
.bottom .one {
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
}
.bottom .one div {
  width: 8vw;
  padding: 0.2vh 0vw 0.2vh 0vw;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.plan .gray {
  background: gray;
}
.right {
  float: right;
  width: 20vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}

.oneR {
  height: 3.5rem;
  padding: 0.05rem 0;
}
.oneR img {
  padding: 0 0;
}
.condition {
  font-size: 14px;
  padding: 0.02rem 0.04rem;
  background-color: #3869a7;
}
.img {
  font-size: 16px;
  width: 40px;
  padding: 0.03rem 0.08rem;
  text-align: center;
  background-color: #3d6aa2;
}
.ul_deel li {
  width: 10vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan {
  padding: 0.08rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
}
.plan div {
  cursor: pointer;
  width: 1.2rem;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0.05rem;
  background-color: #10457d;
  color: #fff;
  margin: 0.05rem;
}
.diagnosis{
  overflow: hidden;
}
.diagnosis p {
  padding: 0.02rem 0;
  white-space: nowrap;
}
.diagnosis .diagnosis_t {
  padding: 0 0 0.01rem 0;
}
.diagnosis .diagnosis_c {
  white-space: wrap;
}
.diagnosis .log_t {
  padding: 0.02rem 0 0.01rem 0;
}
.log_c {
  padding: 0 0 0 0.22rem;
  position: relative;
  width: 4rem;
  height: 60px;
}
.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #4771ae;
  position: absolute;
  top: 15%;
  left: 0;
}
.circle::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 50px;
  background-color: #236689;
}
.log_c:last-child .circle::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 0;
  background-color: #236689;
}
.bj {
  margin: 0 0 0 2vw;
  width: 18vw;
  height: 14vh;
  position: relative;
}
.bj::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      0deg,
      white 0px,
      white 1px,
      transparent 1px,
      transparent 100px
    ),
    linear-gradient(
      90deg,
      white 0px,
      white 1px,
      transparent 1px,
      transparent 100px
    );
  background-size: 30px 30px;
  opacity: 0.3;
  z-index: 0;
}
.imges{
  display: block;
  margin: 0 auto;
  width: 3.5rem;
  height: 2rem;
  margin-top: 0.2rem;
}
</style>
